<template>
	<div class="Learn">
		<div v-for="(item_type, key_type) in learnList">
			<el-row :gutter="10">
				<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
					<div class="grid-content headertitle">
						<div><b>{{item_type.type}}</b></div>
					</div>
				</el-col>
			</el-row>
			<el-row :gutter="10">
				<el-col :xs="24" :sm="6" :md="6" :lg="6" :xl="6" v-for="(item, key) in item_type.learnContent">
					<div class="grid-content ">
						<el-card class="cardStyle">
							<div slot="header" class="clearfix">
								<div align="center">
									<a :href="item.url" target="_blank">
										<el-tag><b>{{item.title}}</b></el-tag>
									</a>
								</div>
							</div>
							<div>
								<p class="linktextremark">
									{{item.memo}}
								</p>
							</div>
						</el-card>
					</div>
				</el-col>
			</el-row>
		</div>
	</div>
</template>

<script>
	import learnjs from '../../assets/js/learn.js'
	export default {
		name: 'learn',
		data() {
			return {
				learnList: []
			};
		},
		metaInfo: {
			title: '自由的个人博客——学习教程', // set a title
			meta: [{ // set meta
				name: '教程,全栈开发教程，学习教程链接,python学习,前端学习,后端学习',
				content: '收集各种语言的链接为了更好的使用，前端开发到后台开发进行一个链接的总结。'
			}],
			link: [{ // set link
				rel: 'asstes',
				href: 'http://www.mxdqh.top/'
			}]
		},
		//初期化页面
		created() {
			this.learnList = learnjs.learn;
		},
		filters: {},
		// 监听
		computed: {},
		methods: {},
	};
</script>

<style>
	.cardStyle {
		padding: '0px';
		height: 200px;
		margin:10px;
	}

	.Learn {
		width: 100%;
		height: 100%
	}

	.Learn .el-col {
		border-radius: 4px;
		margin-bottom: 1px;
	}

	.Learn .-dark {
		background: #99a9bf;
	}

	.Learn .headertitle {
		border-bottom: 1px solid #000;
		margin-bottom: 10px;
	}

	.Learn .grid-content {
		border-radius: 4px;
		min-height: 30px;
	}

	.Learn .clearfix {
		padding: 0px;
	}

	.Learn .el-card__header {
		padding: 10px;
		border-bottom: 1px solid #EBEEF5;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}

	.Learn .linktextremark {
		text-indent: 2em;
		display: -webkit-box;
		/* -webkit-box-orient: vertical; */
		/*! autoprefixer: off */
		-webkit-box-orient: vertical;
		/* autoprefixer: on */
		-webkit-line-clamp: 5;
		overflow: hidden;
	}
</style>
